<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qq</title>
    <link rel="stylesheet" type="text/css" href="qq.css">

</head>
<body>
<div class="login">
    <div class="login_on">登录</div>
    <form id="myform" action="qq_action.php" method="post">
    <div id="login_text">
        <label>账号:</label><input type="text" name="zhanghao" class="input"><br><br>
        <label>密码:</label><input type="password" name="password" class="input"><br><br>
        <label id="message"></label><br><br>
        <button id="login_on_button" type="submit" class="button">登录</button>
        <button id="register_button" type="button" class="button">注册</button>
    </div>
    </form>
</div>
<script type="text/javascript">
    var divelement = document.getElementById('login_text');
    var messageelement = document.getElementById('message');
    var registerelement = document.getElementById('register_button');
    var buttonelement = document.getElementById('login_on_button');
    var formelement = document.getElementById('myform');
    registerelement.onclick = function () {
        location.href = 'register.html';
    };
    buttonelement.onclick = function (e) {

        var zhanghaoelement = document.querySelector('#login_text input[name=zhanghao]');
        var username = zhanghaoelement.value;
        e.preventDefault();
        if (username == '') {
            messageelement.innerHTML = '账号不能为空！';
            setTimeout(function () {
                messageelement.removeChild(messageelement.childNodes);
            },2000);
            setTimeout(function () {
                history.go(0);
            },1000);
            return;
        }
    var passwordelement = document.querySelector('#login_text input[name=password]');
    var password = passwordelement.value;
        if (password == '') {
            messageelement.innerHTML = '密码不能为空！';
            setTimeout(function () {
                messageelement.removeChild(messageelement.childNodes);
            },2000);
            setTimeout(function () {
                history.go(0);
            },1000);
            return;
        }

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var result = JSON.parse(this.responseText);
                    console.log(result);
                    if (result.error == 1) {
                        messageelement.innerHTML = result.message;
                    } else {
                        messageelement.innerHTML = "登录成功！";
                        setTimeout(function () {
                            location.href = 'main.php';
                        }, 1000);
                    }
                }else{
                    alert('出现错误，请联系管理员');
                }
            }
        };
        xhr.open(formelement.method,formelement.action);
        var data = new FormData();
        data.append('username',username);
        data.append('password',password);
        xhr.send(data);
    }

</script>
</body>
</html>